<template>
    <div style="background-color: #fff;padding: 20px;">
        <a-card>
            <a-tabs :active-key="activeKey" @change="tabchange">
                <a-tab-pane key="api">
                    <template #title>
                        <icon-code-sandbox />API接口
                    </template>
                    <languageTable ref="apiRef" ></languageTable>
                </a-tab-pane>
                <a-tab-pane key="mainland">
                    <template #title>
                        <icon-highlight />商城
                    </template>
                    <languageTable ref="manageRef" ></languageTable>
                </a-tab-pane>
            </a-tabs>
        </a-card>
    </div>
</template>
<script setup>
  import { onMounted, ref, reactive, computed,watch } from 'vue'
  import languageTable from './table.vue'
 import languageApi from '@/api/system/system'
  import { Message } from '@arco-design/web-vue'
  import { throttle } from 'lodash';
  const apiRef=ref()
  const manageRef=ref()
  const activeKey=ref('api')
  const tabchange=(e)=>{
    console.log('e',e);
    activeKey.value=e
    if(e=='api'){
        apiRef.value.getData('api')
    }else if(e=='mainland'){
        manageRef.value.getData('mainland')
    }
  }

  onMounted(()=>{
    apiRef.value.getData('api')
  })
</script>